<template>
  <div
    ref="previewContent"
    style="
      width: 100%;
      height: 100%;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    "
  >
    <div :style="mainStyle" class="pre_view" id="pre_view" style v-if="baseData.length > 0">
      <span :style="printTimeStyle" v-if="baseData[0].showPrintTime">打印时间：{{ baseData[0].printTime }}</span>
      <div class="logo" :style="logoStyle" v-if="baseData[2].logo.selected">
        <el-image style="width: 100%; height: 100%" :src="baseData[2].logo.url" fit="contain"></el-image>
      </div>
      <div class="title" :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
      <div class="title" :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      <div class="bill_head" :style="billHeadStyle">
        <div :style="billHeadLeftStyle">
          <div v-for="(item, index) in baseData[4].columnData" :key="index">
            <div v-if="item.selected && item.props == 'riqi'" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <div :style="billHeadRightStyle">
          <div v-for="(item, index) in baseData[4].columnData" :key="index">
            <div v-if="item.selected && item.props != 'riqi'" :style="{ 'margin-left': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%;display: flex;align-items: flex-start;">
        <div class="bill_body" id="bill_body" :style="billBodyStyle">
          <el-table
            style="border: 1px solid black"
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="getTableData()"
            width="100%"
          >
          <!-- baseData[5].tableData -->
            <!-- <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column> -->
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column
                v-if="item.morenState"
                :label="item.morenName"
                :prop="item.props"
                :width="item.width * scale"
              ></el-table-column>
            </template>
            <div slot="append" style="display: flex; background: #ededed;" class="append" v-if="this.baseData[5].columnData.length>0">
              <!-- 只显示合计 + 共几条明细 -->
              <div :style="{ width: 80 * scale + 'px', 'flex-shrink': 0 }">
                <div style="text-align: center; width: 100%" :style="tableFootStyle">{{ getshowValue('', 0) }}</div>
              </div>
              <div style="text-align: right; padding-right: 2px" :style="tableFootStyle">{{ getshowValue('', 1) }}</div>
            </div>
          </el-table>
        </div>
      </div>
      <div class="bill_foot" :style="billFootStyle">
        <div :style="billFootLeftStyle">
          <div v-for="(item, index) in baseData[6].columnData" :key="index">
            <div v-if="item.selected" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <!-- <div :style="billFootRightStyle">
          <span style="margin-right: 10px;">制单人：{{baseData[6].otherData.createName}}</span>
          <span>制单日期：{{baseData[6].otherData.createOrderDate}}</span>
        </div> -->
      </div>
      <span :style="technicalSupportStyle">象过河软件技术支持</span>
      <div :style="bottomStyle">
        <div v-for="item in baseData[7].qrList" :key="item.id" style="display: flex; align-items: center">
          <template v-if="item.selected">
            <span :style="{ 'font-size': scale * 10 + 'px' }">{{ item.title }}</span>
            <div :style="qrImgStyle">
              <img :style="{ width: '100%', height: '100%' }" :src="item.url" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    baseData: Array,
    tipsData: Object,
    isPrint: Boolean,
  },
  data() {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false,
      domReady: false,
      scale: 1, //比例
      printTime: '',
      width: 0,
    }
  },
  created() {
    console.log('this.baseData',this.baseData);
  },
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.domReady = true
    })
  },
  activated() {
    // let preView = document.getElementById('pre_view')
    // console.log(preView);
  },
  computed: {
    mainStyle() {
      if (this.domReady) {
        let item = {
          title: '纸张尺寸',
          unfold: false,
          sort: 2,
          padding: {
            top: 10,
            bottom: 10,
            left: 20,
            right: 20,
          },
          typeValue: 'A4',
          type: [
            {
              lx: 'A4',
              selected: true,
            },
            {
              lx: 'A5',
              selected: false,
            },
          ],
          directionValue: '横向',
          direction: [
            {
              lx: '横向',
              selected: true,
            },
            {
              lx: '纵向',
              selected: false,
            },
          ],
        }
        let padding = item.padding
        if (!this.baseData || this.baseData.length <= 0) {
        } else {
          padding = this.baseData[1].padding
          item = this.baseData[1]
        }

        let w = 0
        let h = 0
        // if (item.directionValue == '横向') {
          w = item.typeValue == 'A4' ? 1123 : 794
          h = item.typeValue == 'A4' ? 794 : 559
        // } else {
        //   w = item.typeValue == 'A4' ? 794 : 559
        //   h = item.typeValue == 'A4' ? 1123 : 794
        // }
        w = w - 20
        h = h - 60
        let tScale = w / h 
        let availableWidth = this.$refs.previewContent.offsetWidth ? this.$refs.previewContent.offsetWidth - 40 : w
        let width = Math.min(w, availableWidth)
        this.scale = width / w
        // let availableHeight = this.$refs.previewContent.offsetHeight ? this.$refs.previewContent.offsetHeight - 40 : h
        // let availableScale = availableWidth / availableHeight

        // let width = 0
        // let height = 0
        // if (tScale >= availableScale) {
        //   width = availableWidth
        //   height = availableWidth / tScale
        // } else {
        //   height = availableHeight
        //   width = availableHeight * tScale
        // }
        // this.scale = width / w
        // if (this.scale >= 1) {
        //   this.scale = 0.75
        //   height = height * this.scale
        //   width = width * this.scale
        // }
        // console.log('比例：', this.scale)

        let params = {
          width: width + 'px',
          // height: height + 'px',
          'padding-top': this.scale * padding.top + 'px',
          'padding-bottom': this.scale * padding.bottom + 'px',
          'padding-left': this.scale * padding.left + 'px',
          'padding-right': this.scale * padding.right + 'px',
          backgroundColor: '#fff',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
          // boxShadow: 'rgb(153,153,153) 0px 0px 10px',
        }

        if (this.isPrint) {
          params = {
            width: width + 'px',
            'padding-top': this.scale * padding.top + 'px',
            'padding-bottom': this.scale * padding.bottom + 'px',
            'padding-left': this.scale * padding.left + 'px',
            'padding-right': this.scale * padding.right + 'px',
            backgroundColor: '#fff',
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            color: '#000000',
            'font-family': 'Microsoft YaHei !important',
            // boxShadow: 'rgb(153,153,153) 0px 0px 10px',
          }
        }
        return params
      }
      return ''
    },
    // logo
    logoStyle() {
      return {
        position: 'absolute',
        top: this.scale * 50 + 'px',
        left: this.scale * 58 + 'px',
        'z-index': 1,
        width: this.scale * 109 + 'px',
        height: this.scale * 36 + 'px',
      }
    },
    // 主标题
    titleStyle() {
      let item = this.baseData[2].titleStyle
      return {
        'margin-top': this.scale * 20 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 副标题
    subTitleStyle() {
      let item = this.baseData[2].subTitleStyle
      return {
        'margin-top': this.scale * 3 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadStyle() {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadLeftStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        whiteSpace: 'nowrap',
        marginRight:10+'px',
        // flexDirection: 'column',
        alignItems: 'center',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billBodyStyle() {
      return {
        // width: '100%',
        overflow: 'hidden',
        overflowX: 'clip',
        // margin: '5px 0',
        margin: '5px 0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyle() {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let size = this.baseData[2].tableBody.size
      let height = Math.max(20, h)
      return {
        height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        lineHeight: height + 'px',
        // borderRight: '1px solid black',
        minHeight: '20px',
        // padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    headerCellStyle() {
      console.log(this.scale * this.baseData[3].headHeight)
      return {
        textAlign: 'center',
        height: this.scale * this.baseData[3].headHeight + 'px',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        backgroundColor: '#ededed',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    cellStyle() {
      let h = parseInt(this.scale * this.baseData[3].rowHeight)
      let height = Math.max(20, h)
      console.log(height)
      return {
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        textAlign: 'center',
        height: height + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootStyle() {
      return {
        fontSize: this.scale * 10 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootLeftStyle() {
      return {
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootRightStyle() {
      return {
        display: 'flex',
        whiteSpace: 'nowrap',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    qrImgStyle() {
      return {
        width: this.scale * 60 + 'px',
        height: this.scale * 60 + 'px',
        // 'padding': this.scale * 5 + 'px',
        margin: this.scale * 10 + 'px',
      }
    },
    // 技术支持
    technicalSupportStyle() {
      return {
        'font-size': this.scale * 10 + 'px',
        // 'position': 'absolute',
        // 'bottom': this.scale * 12 + 'px',
        width: '100%',
        textAlign: 'left',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        alignSelf: 'flex-start',
      }
    },
    printTimeStyle() {
      let padding = this.baseData[1].padding
      return {
        color: '#666666',
        'font-size': this.scale * 8 + 'px',
        position: 'absolute',
        top: this.scale * (padding.top + 12) + 'px',
        right: this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    bottomStyle() {
      let padding = this.baseData[1].padding
      return {
        bottom: this.scale * padding.bottom - 10 + 'px',
        left: this.scale * padding.left + 'px',
        right: this.scale * padding.right + 10 + 'px',
        // position: 'absolute',
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
  },
  methods: {
    getTableData() {
      let list = this.cloneData(this.baseData[5].tableData)
      let result = []
      //商品数据
      result = result.concat(
        list.map((item) => {
          item.isGive = item.isGive ? '是' : '否'
          item.reconciliationFlag = item.reconciliationFlag == '1' ? '已对账' : '未对账'
          item.invoiceTime = item.invoiceTime ? item.invoiceTime.substring(0, 10) : ''
          return item
        })
      )
      return result
    },
    cloneData(obj) {
      return JSON.parse(JSON.stringify(obj))
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + data.length + '条明细'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    getshowValue(item, index, parted = false) {
      let back = ''
      if (index === 0) {
        back = '合计'
      } else if (index === 1) {
        let length = 0
        if (this.baseData && this.baseData[5].tableData) {
          length = this.baseData[5].tableData.length
        }
        back = '共' + length + '条明细'
      }
      return back
    },
  },
}
</script>

<style lang="scss" scoped media="print">
.pre_view {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: #000000;
}

.bottom_view {
  position: absolute;
  // bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.qr_item {
  display: flex;
  align-items: center;
}

// .qr_img {
//   // background-color: red;
// }

.bill_head {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
  }
}

.bill_foot {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .right {
    display: flex;
    white-space: nowrap;
  }
}

.bill_body {
  // width: 100%;
  overflow: hidden;
  overflow-x: clip;
}

::v-deep .el-table {
  border: 1px solid black;
  border-bottom: none;
  box-sizing: border-box;
  height: 100%;

  th,
  td {
    padding: 0;
    color: #666;
    box-sizing: border-box;
    // border-right: 1px solid #e3e3e3;

    .cell {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 2px 3px;
      line-height: 16px;
      // white-space: nowrap;
    }
  }

  th {
    .cell {
      // background: #ededed;
      justify-content: center;
    }
  }

  .el-table__body tr:hover > td {
    background: #e3f6ff;
  }

  .el-table__footer-wrapper {
    td {
      background: #f4f4f4;
      border: none;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .el-table--border {
    // border: 2px solid #e3e3e3;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table_cell.is-leaf {
    // border: 2px solid #e3e3e3;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    // border: #e3e3e3;
  }
}
::v-deep .el-table__header .has-gutter tr>th:nth-last-child(2){
  border-right:  none !important;
}
::v-deep .el-table__body tr>td:last-child{
  border-right:  none !important;
}
</style>
<style>
@media print {
  /* 确保边框正常显示 */
  .el-table th {
    background: unset !important;
    /* height: 30px !important; */
  }
  /* .el-table td{
    height: 60px !important;
  } */
  .el-table tr {
    background: transparent !important;
    /* height: 30px !important; */
  }
  .pre_view{
    /* margin-left: 20px !important; */
  }
  .append {
    background: unset !important;
  }
  .el-table::before{
    background: transparent !important;;
  }
  .el-table::after{
    background: transparent !important;;
  }
}
</style>
